<!DOCTYPE html>
<html lang="en">
<head>
    <!--引入互联网文件（目前互联网文件不对，需要更正，暂时不可以用）-->
<!--    <link rel="stylesheet" type="text/css" href="https://github.com/Semantic-Org/Semantic-UI/tree/master/dist/semantic.min.css">-->
<!--    <script-->
<!--      src="https://code.jquery.com/jquery-3.1.1.min.js"-->
<!--      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="-->
<!--      crossorigin="anonymous"></script>-->
<!--    <script src="https://github.com/Semantic-Org/Semantic-UI/tree/master/dist/semantic.min.js"></script>-->


    <!--引入本地文件-->
    <link rel="stylesheet" href="{{ url_for('static', path='/Semantic-UI-CSS/semantic.min.css')}}">
    <script src="{{ url_for('static', path='/Semantic-UI-CSS/semantic.min.css')}}"></script>
    <script src="{{ url_for('static', path='/jquery-3.6.0/jquery.js')}}"></script>

    <script>
        $(document).ready(function (){
            $("#filter").click(function (){
                const city = $("#city").val();
                window.location.href = "http://" +
                    window.location.host +
                    "/coronavirus_app?city=" + city;
            });

            $("#sync").click(function (){
                $.get("{{ sync_data_url }}", function(result){
                    alert("Message: " + result.message)
                });
            });
        });
    </script>
    <meta charset="UTF-8">
    <title>新冠病毒疫情跟踪</title>
</head>
<body>
    <div class="ui container">
        <h2></h2>
        <h1 style="text-align: center">新冠病毒疫情跟踪</h1>
        <h2></h2>

        <button id="filter" style="float: left" type="submit" class="ui button alert_secondary">过滤</button>

        <div class="ui input">
            <label for="city"></label><input id="city" type="text" placeholder="城市" value="">

        </div>

        <button id="sync" style="float: right" type="submit" class="ui button primary">同步数据</button>

        <table class="ui celled table">
            <thead>
                <tr>
                    <th>城市</th>
                    <th>日期</th>
                    <th>确诊数量</th>
                    <th>死亡数量</th>
                    <th>治愈数量</th>
                    <th>更新时间</th>
                </tr>
            </thead>
            {% for d in data %}
                <tr>
                    <td>{{ d.city.province }}</td>
                    <td>{{ d.date }}</td>
                    <td>{{ d.confirmed }}</td>
                    <td>{{ d.death }}</td>
                    <td>{{ d.recovered }}</td>
                    <td>{{ d.update_date }}</td>
                </tr>
            {% endfor %}
        </table>

    </div>
</body>
</html>